I have a 2D array stored using useState() in React. When I update one of the values in the array (be creating an entirely new 2D array, it doesn't actually re-render my component with the new values. The component only gets updated if I do something else after updating the 2D array that causes the component

My array is defined like this:

const [grid, setGrid] = useState([
    ['', '', ''],
    ['', '', ''],
    ['', '', '']
  ]

And I update it like this

    setGrid(prevGrid => {
      const newRow = prevGrid[posy]
      newRow[posx] = currentPlayer
      const newGrid = prevGrid
      newGrid[posy] = newRow
      return newGrid
    }

And finally, I'm using it in components like this:

<Square status={grid} y={2} x={0} clickEvent={() => handleBoxClick(2, 0)} /

I suspected that the problem was relating to the "depth" of the state object, but I don't think React has the same problems with not detecting deep updates that Vue has. (I am formerly a Vue dev) So, I figure I'm doing something wrong here with updating the state.

Thanks